import React, { PureComponent, Fragment } from 'react';
import { connect } from 'react-redux';
import { Switch, Route, withRouter } from 'react-router';
import { Redirect } from 'react-router-dom';
import Loadable from 'react-loadable';

import Loading from '../components/common/lazyLoading';
import { getQueryParam } from '../utils/url';
import withNav from '../components/nav/nav.wap';

export const basePath = '/wap';

export const routes = [
  {
    path: '/agreement',
    needLogin: false,
    component: Loadable({
      loader: () => import('../pages/app/agreement'),
      loading: Loading,
    }),
  },
  {
    path: '/login',
    needLogin: false,
    component: Loadable({
      loader: () => import('../pages/user/login.cq'),
      loading: Loading,
    }),
  },
  {
    path: '/home',
    needLogin: true,
    component: withNav(
      Loadable({
        loader: () => import('../pages/home/home.wap'),
        loading: Loading,
      }),
      0,
    ),
  },
  {
    path: '/refuel',
    needLogin: true,
    component: Loadable({
      loader: () => import('../pages/refuel/refuel.cq'),
      loading: Loading,
    }),
  },
  {
    path: '/userCenter',
    needLogin: true,
    component: withNav(
      Loadable({
        loader: () => import('../pages/user/userCenter'),
        loading: Loading,
      }),
      1,
    ),
  },
  {
    path: '/result',
    needLogin: true,
    component: Loadable({
      loader: () => import('../pages/result/result'),
      loading: Loading,
    }),
  },
  {
    path: '/moreCoupon',
    needLogin: true,
    component: Loadable({
      loader: () => import('../pages/coupon/moreCoupon'),
      loading: Loading,
    }),
  },
  {
    path: '/orderList',
    needLogin: true,
    component: Loadable({
      loader: () => import('../pages/refuel/refuelList'),
      loading: Loading,
    }),
  },
  {
    path: '/refuelDetail',
    needLogin: true,
    component: Loadable({
      loader: () => import('../pages/refuel/refuelDetail'),
      loading: Loading,
    }),
  },
  {
    path: '/couponList',
    needLogin: true,
    component: Loadable({
      loader: () => import('../pages/coupon/couponList'),
      loading: Loading,
    }),
  },
  {
    path: '/invoiceBlocked',
    needLogin: true,
    component: Loadable({
      loader: () => import('../pages/invoice/invoiceLimited'),
      loading: Loading,
    }),
  },
  {
    path: '/invoice',
    needLogin: true,
    component: Loadable({
      loader: () => import('../pages/invoice/invoice'),
      loading: Loading,
    }),
  },
  {
    path: '/invoiceInfoList',
    needLogin: true,
    component: Loadable({
      loader: () => import('../pages/invoice/invoiceInfoList'),
      loading: Loading,
    }),
  },
  {
    path: '/editInvoiceInfo',
    needLogin: true,
    component: Loadable({
      loader: () => import('../pages/invoice/editInvoiceInfo'),
      loading: Loading,
    }),
  },
  {
    path: '/invoiceList',
    needLogin: true,
    component: Loadable({
      loader: () => import('../pages/invoice/invoiceList'),
      loading: Loading,
    }),
  },
  {
    path: '/invoicePreview',
    needLogin: false,
    component: Loadable({
      loader: () => import('../pages/invoice/preViewInvoice'),
      loading: Loading,
    }),
  },
  {
    path: '/sendEmail',
    needLogin: true,
    component: Loadable({
      loader: () => import('../pages/invoice/sendEmail'),
      loading: Loading,
    }),
  },
  {
    path: '*',
    component: Loadable({
      loader: () => import('../pages/app/404'),
      loading: Loading,
    }),
  },
];

@withRouter
@connect(({ user, coupon, loading }) => {
  return {
    user: user.get('user'),
    showDialog: coupon.getIn(['dialog', 'show']),
    dialogType: coupon.getIn(['dialog', 'type']),
    needCarNo: coupon.getIn(['dialog', 'needCarNo']),
    giftBusy: ['coupon/getGiftPackage'].some(action => loading.effects[action]),
  };
})
class WapRoutes extends PureComponent {
  state = {
    showNav: true,
  }
  componentDidMount() {
    window.source = 'COMMON';
    // window.source = 'CHONGQINGPUBLIC';
  }


  render() {
    const { showNav } = this.state;
    const {
      user,
    } = this.props;
    const cells = routes.map((route) => {
      const {
        path,
        component: AppComponent,
        needLogin,
        ...rest
      } = route;
      const relPath = `${basePath}${path}`;
      return (
        <Route
          key={relPath}
          path={relPath}
          {...rest}
          render={(props) => { // eslint-disable-line
            if (needLogin && !user.get('token') && !getQueryParam('yyeCode') && path !== '/login') {
              const redirect = {
                pathname: `${basePath}/login`,
                search: `?redirect=${basePath}${path}`,
              };
              return <Redirect to={redirect} />;
            } else {
              return <AppComponent showNav={showNav} {...props} canRefuel />;
            }
          }}
        />
      );
    });
    return (
      <Fragment>
        <Switch>
          {cells}
        </Switch>
      </Fragment>

    );
  }
}

export default WapRoutes;

